<template>
  <view class="gift_wrapper">
    <navBar
      :text="title"
      :bacicon="'#fff'"
      :background="bac"
      :tit_c="'#fff'"
    ></navBar>
    <view
      class="content_wrapper"
      :style="{
        paddingTop: marginTopHeight,
      }"
    >
      <view class="main_search">
          <!--     <image
                 class="gift_img"
                 src="https://s1.ax1x.com/2023/06/21/pCGFRxO.png"
               ></image> -->
        <!-- search-->
        <view class="search_" :style="{ top: marginTopHeight }">
          <view class="search_wrapper flex">
            <image class="navSearch" src="/static/images/search.png"></image>
            <u-input
              v-model="value"
              :type="type"
              :border="border"
              class="input"
              placeholder="请输入搜索内容"
              @confirm="searchSubmitValue"
            />
          </view>
        </view>
      </view>
      <view class="swiper" v-if="imgUrls.length">
        <swiper
          indicator-dots="true"
          :autoplay="true"
          :circular="circular"
          :interval="interval"
          :duration="duration"
          indicator-color="rgba(255,255,255,0.6)"
          indicator-active-color="#fff"
          @change="bindchangeFn"
        >
          <block v-for="(item, index) in imgUrls" :key="index">
            <swiper-item>
              <navigator
                :url="item.url"
                class="slide-navigator acea-row row-between-wrapper"
                hover-class="none"
              >
                <image
                  :src="httpUrlFn2(item.imgUrl)"
                  class="slide-image"
                  lazy-load
                ></image>
              </navigator>
            </swiper-item>
          </block>
        </swiper>
      </view>
      <view style="height: 100rpx" v-if="!imgUrls.length"></view>
      <!-- 礼品 -->
      <view class="shopping_wrapper">
        <view class="shopping_" v-if="shoppingList.length > 0">
          <view
            class="item_"
            v-for="(item, index) in shoppingList"
            :key="index"
            @tap="shoppingListFn(item)"
          >
            <view class="image_">
              <image :src="httpUrlFn(item)" mode="aspectFit" />
            </view>
            <view class="info_">
              <view class="text_">{{ item.prodName }}</view>
              <view class="sold_number">已售{{ item.vrPayUsers }}</view>
              <view class="commission_">
                <view class="item_1">礼包商品</view>
                <view class="item_2" v-if="item.CommissionToggle > 0"
                  >佣金:￥{{ item.CommissionToggle }}</view
                >
              </view>
              <view class="money_wrapper">
                <view class="money_">
                  <view class="money_1"
                    >￥<text>{{ item.price }}</text></view
                  >
                  <view class="money_2">￥{{ item.oriPrice }}</view>
                </view>
                <view class="purchase_wrapper"> 立即购买 > </view>
              </view>
            </view>
          </view>
        </view>
        <view
          class="shopping_"
          v-if="shoppingList.length === 0"
          style="
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
          "
          >暂无数据!</view
        >
      </view>
      <u-loadmore
        v-if="shoppingList.length > 0"
        :status="status"
        :icon-type="iconType"
        :load-text="loadText"
        @loadmore="loadNextFn"
      />
    </view>
  </view>
</template>

<script>
import navBar from "@/components/nav.vue";
import { getShopPing } from "@/api/shopping/index";
import { BASE_URL_IMAHE } from "../../../../utils/https";
import { bannerList } from "@/api/banner";

var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + "px";
var marginTopHeight = uni.getSystemInfoSync().statusBarHeight + 48 + "px";
export default {
  name: "index.vue",
  components: {
    navBar,
  },
  data() {
    return {
      imgUrls: [],
      //是否采用衔接滑动，即播放到末尾后重新回到开头
      circular: true,
      //自动切换时间间隔
      interval: 3000,
      duration: 500, // 下划线动画时长
      userInfoServer: "",
      value: "",
      type: "text",
      border: false,
      title: "礼包中心",
      bac: {
        background: "#EF392E",
      },
      statusBarHeight: statusBarHeight,
      marginTopHeight: marginTopHeight,
      status: "loadmore",
      iconType: "flower",
      loadText: {
        loadmore: "点击加载更多",
        loading: "正在加载，请喝杯茶...",
        nomore: "哼~😕我也是有底线的~",
        //哼~😕我也是有底线的~
        //😕我也是有底线的~
      },
      page: 0,
      pageSize: 10,
      shoppingList: [],
      params: {
        current: 1,
        size: 10,
        categoryId: "", //商品类型id
        channelId: 2, //商品分栏 1->普通商品；2->礼包；3->积分兑换
        prodName: "", //商品名称
      },
    };
  },
  onShow() {
    this.userInfoServer = uni.getStorageSync("userInfoServer");
    this.indexPage();
    this.bannerList();
  },
  //下拉刷新
  onPullDownRefresh() {
    uni.showLoading({
      title: "正在刷新...",
    });
    this.params.current = 1;
    this.params.size = 10;
    this.shoppingList = [];
    this.indexPage();
  },
  //上拉
  onReachBottom() {
    console.log("上拉加载");
    this.indexPage();
  },
  methods: {
    //banner图 列表
    async bannerList() {
      const res = await bannerList(3);
      if (res.code === 0) {
        this.imgUrls = res.data;
        uni.hideLoading();
      }
    },

    httpUrlFn2(item) {
      return BASE_URL_IMAHE + item;
    },

    //轮播图
    bindchangeFn(e) {
      console.log(e, "e");
    },

    shoppingListFn(item) {
      console.log(item, "item");
      uni.navigateTo({
        url: `/pages/subpackage/goods/detail?prodId=${item.prodId}&pic=${
          item.pic
        }&prodName=${item.prodName}&price=${item.price}&oriPrice=${
          item.oriPrice
        }&vrPayUsers=${item.vrPayUsers}&commission=${
          item.commission
        }&properties=${item.properties}&content=${encodeURIComponent(
          JSON.stringify(item.content)
        )}&channelId=2&itemType=2`,
      });
    },

    httpUrlFn(item) {
      return BASE_URL_IMAHE + item.pic;
    },

    async indexPage() {
      const res = await getShopPing(this.params);
      console.log(res, "礼品");
      if (res.code === 0) {
        this.shoppingList.push(...res.data.records);

        this.shoppingList.forEach((item) => {
          const CommissionToggle =
            this.userInfoServer.roleId === 1
              ? item.uniteCommission
              : this.userInfoServer.roleId === 2
              ? item.partnerCommission
              : this.userInfoServer.roleId === 3
              ? item.facilitatorCommission
              : this.userInfoServer.roleId === 4
              ? item.shopkeeperCommission
              : "";
          if (CommissionToggle && CommissionToggle > -1) {
            item.CommissionToggle = CommissionToggle;
          } else {
            item.CommissionToggle = "0";
          }
        });

        console.log(
          JSON.parse(JSON.stringify(this.shoppingList)),
          "this.shoppingList"
        );
        //关闭加载动画
        uni.stopPullDownRefresh();
        uni.hideLoading();
        if (res.data.records.length === 0) {
          setTimeout(() => {
            this.status = "nomore";
          }, 800);
          return;
        }

        if (res.data.records.length >= this.params.size) {
          this.params.current++;
          return;
        }

        if (this.shoppingList.length < this.params.size) {
          this.params.current++;
          setTimeout(() => {
            this.status = "loadmore";
          }, 800);
        } else if (
          res.data.records.length !== 0 &&
          res.data.records.length < this.params.size
        ) {
          this.params.current++;
          return;
        }
      }
    },

    searchSubmitValue(e) {
      console.log(e, "e");
      if (this.$util.trim(e).length > 0) {
        this.params.prodName = e;
        this.params.current = 1;
        this.params.size = 10;
        this.shoppingList = [];
        this.indexPage();
      } else {
        this.params.prodName = e;
        this.params.current = 1;
        this.params.size = 10;
        this.shoppingList = [];
        this.indexPage();
        // return this.$util.Tips({
        //   title: "请填写要搜索的商品信息",
        // });
      }
    },

    //点击组件触发上拉加载
    loadNextFn() {
      this.indexPage();
    },
  },
};
</script>

<style scoped lang="scss">
.swiper {
  margin-top: rpx(50);
  position: relative;
  width: 100%;
  padding: rpx(4) rpx(12) rpx(8);
  border-radius: rpx(5);
  //overflow: hidden;
  /* #ifdef MP */
  z-index: 10;
  /* #endif */
  swiper,
  .swiper-item,
  image {
    width: 100%;
    height: rpx(200);
    border-radius: rpx(5);
  }
}

.gift_wrapper {
  background: #ef392e;
  min-height: 100vh;
  //overflow: hidden;
  padding-bottom: rpx(16);

  .content_wrapper {
    background: #ef392e;
    position: relative;
  }
}

.main_search {
  .gift_img {
    width: rpx(375);
    height: rpx(206);
    vertical-align: middle;
    //position: absolute;
    //position: fixed;
    top: rpx(64);
    left: 0;
  }
  .search_ {
    //background: #ef392e;
    position: fixed;
    top: rpx(58);
    left: rpx(0);
    right: rpx(0);
    //position: absolute;
    //top: 0;
    //left: 0;
    //right: 0;
    z-index: 33;
    height: rpx(44);
    padding: rpx(6) rpx(12);

    > .search_wrapper {
      background: #ffffff;
      border-radius: rpx(16);
      display: flex;
      align-items: center;

      .input {
        padding-right: rpx(12);
        display: flex;
        align-items: center;
        //width: rpx(351);
        height: rpx(32);
        border-radius: rpx(16);
        font-size: rpx(14);
        font-weight: 400;
        color: #b2b2b2;
        width: 100%;
      }

      .navSearch {
        //background: url("../../../static/images/search.png") no-repeat;
        background-size: rpx(16) rpx(16);
        vertical-align: top;
        margin-right: rpx(8);
        margin-left: rpx(12);
        width: rpx(16);
        height: rpx(16);
      }
    }
  }
}

.shopping_wrapper {
}
.shopping_ {
  z-index: 22;
  margin: rpx(12) rpx(12);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  //background: #EF392E;
  //padding-top: rpx(270);
  //position: absolute;
  overflow: auto;
  top: 0;
  left: 0;
  .item_ {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: rpx(8);
    background: #ffffff;
    border-radius: rpx(5);
    position: relative;
    overflow: hidden;
    > .image_ {
      //height: rpx(172);
      height: rpx(351);
      background: #fafafa;
      border-top-left-radius: rpx(5);
      border-top-right-radius: rpx(5);
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      image {
        vertical-align: middle;
        //width: rpx(98);
        //height: rpx(132);
        height: rpx(351);
      }
    }
    > .info_ {
      padding: rpx(6) rpx(10) rpx(10);
      background: rgba(255, 255, 255, 0.98);
      border: rpx(1) solid #ffffff;
      position: absolute;
      bottom: rpx(0);
      left: 0;
      right: 0;
      > .text_ {
        margin-bottom: rpx(6);
        //width: rpx(150);
        //height: rpx(36);
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2; /*最大行数*/
      }
      > .sold_number {
        font-size: rpx(12);
        font-weight: 400;
        color: #888888;
      }
      > .commission_ {
        display: flex;
        margin-bottom: rpx(6);
		margin-top: rpx(10);
        > .item_1 {
          min-width: rpx(46);
          font-size: rpx(10);
          font-weight: 400;
          color: #ffffff;
          background: #ff421c;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: rpx(2);
          padding: rpx(1) rpx(3) rpx(1) rpx(3);
          margin-right: rpx(4);
        }
        > .item_2 {
          min-width: rpx(59);
          background: rgba(250, 81, 81, 0.1);
          border-radius: rpx(2);
          border: rpx(1) solid #fa5151;
          font-size: rpx(10);
          font-weight: 400;
          color: #fa5151;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: rpx(1) rpx(3) rpx(1) rpx(3);
        }
      }
      > .money_wrapper {
        display: flex;
        justify-content: space-between;
        > .money_ {
          display: flex;
          align-items: center;
          > .money_1 {
            margin-right: rpx(4);
            font-size: rpx(11);
            font-weight: bold;
            color: #fa5151;
            > text {
              font-size: rpx(15);
            }
          }
          > .money_2 {
            font-size: rpx(10);
            font-weight: 400;
            color: #b2b2b2;
            text-decoration: line-through;
          }
        }
        //> .sold_number {
        //  font-size: rpx(12);
        //  font-weight: 400;
        //  color: #888888;
        //}
        > .purchase_wrapper {
          padding: rpx(9) rpx(18);
          background: rgba(255, 255, 255, 0.6);
          border-radius: rpx(3);
          border: rpx(1) solid #b2b2b2;
          font-size: rpx(15);
          font-weight: 400;
          color: #353535;
        }
      }
    }
  }
}
</style>
